<template>
<div class="container_main">
  <div class="container_top">
    <div class="top_left">
      <div class="title">各地市申请概览</div>
      <div class="records">
        <div :class="['record',index==selRecordIndex?'on':'']" v-for="(item, index) in tableData" :key="index" @click="zysqxq(index)">
          <div class="index">{{index+1}}.</div>
          <div class="info">{{item.info}}</div>
        </div>
      </div>
    </div>
    <div class="top_right">
      <div class="title">资源申请详情</div>
      <div class="content">
        <div class="part" style="border-right: 1px dashed #75D7E9;">
          <div class="row">
            <div class="label">城市</div>
            <div class="val"><div class="val--">{{selRecord.city}}</div></div>
          </div>
          <div class="row">
            <div class="label">问题</div>
            <div class="val val1"><div class="val--">{{selRecord.question}}</div></div>
          </div>
          <div class="row">
            <div class="label">申请</div>
            <div class="val val1"><div class="val--">{{selRecord.apply}}</div></div>
          </div>
        </div>
        <div class="part" style="border-right: 1px dashed #75D7E9;">
          <div class="tit">越限设备详情</div>
          <div class="chart" id="chart1" ref="chart1"></div>
        </div>
        <div class="part">
          <div class="tit">申请资源详情</div>
          <div class="chart" id="chart2" ref="chart2"></div>
        </div>
      </div>

    </div>
  </div>
  <div class="container_bottom">
    <div class="title">省地交互流程</div>
    <div class="content">
      <div class="col">
        <img class="icon" src="@/assets/images/shengdiao-flow1.png"/>
        <div class="desc">省调确认收到地调申请</div>
        <img class="status" src="@/assets/images/shengdiao-status1.png"/>
      </div>
      <div class="col--">
        <img class="arrow" src="@/assets/images/shengdiao-arrow.png"/>
      </div>
      <div class="col">
        <img class="icon" src="@/assets/images/flow2.png"/>
        <div class="desc">省调修改资源计划签单确认</div>
        <img class="status" src="@/assets/images/shengdiao-status1.png"/>
      </div>
      <div class="col--">
        <img class="arrow" src="@/assets/images/shengdiao-arrow.png"/>
      </div>
      <div class="col">
        <img class="icon" src="@/assets/images/shengdiao-flow3.png"/>
        <div class="desc">省调下发</div>
        <img class="status" src="@/assets/images/shengdiao-status1.png"/>
      </div>
      <div class="col--">
        <img class="arrow" src="@/assets/images/shengdiao-arrow.png"/>
      </div>
      <div class="col">
        <img class="icon" src="@/assets/images/didiao-flow4.png"/>
        <div class="desc">地调接收状态</div>
        <img class="status" src="@/assets/images/shengdiao-status0.png"/>
      </div>
      <img class="dashed" src="@/assets/images/shengdiao-dashed.png"/>
    </div>
  </div>
</div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "didiao",
  components:{

  },
  data(){
    return{
      tableData:[
        {city:'南京',question:'*****35kV主变,最大潮流时刻12:00，最大潮流200MW，设备限额150MW，预计越限50MW',apply:'申请调节****储能资源，调节时段11:30-13:00，调节功率-20MW。',info:'南京****主变过载，请求调用****储能资源'},
        {city:'无锡',question:'*****35kV主变,最大潮流时刻12:00，最大潮流200MW，设备限额150MW，预计越限50MW',apply:'申请调节****储能资源，调节时段11:30-13:00，调节功率-20MW。',info:'无锡****主变过载，请求调用****储能资源'},
        {city:'徐州',question:'*****35kV主变,最大潮流时刻12:00，最大潮流200MW，设备限额150MW，预计越限50MW',apply:'申请调节****储能资源，调节时段11:30-13:00，调节功率-20MW。',info:'徐州****主变过载，请求调用****储能资源'},
        {city:'盐城',question:'*****35kV主变,最大潮流时刻12:00，最大潮流200MW，设备限额150MW，预计越限50MW',apply:'申请调节****储能资源，调节时段11:30-13:00，调节功率-20MW。',info:'盐城****主变过载，请求调用****储能资源'},
        {city:'扬州',question:'*****35kV主变,最大潮流时刻12:00，最大潮流200MW，设备限额150MW，预计越限50MW',apply:'申请调节****储能资源，调节时段11:30-13:00，调节功率-20MW。',info:'扬州****主变过载，请求调用****储能资源'},
        {city:'泰州',question:'*****35kV主变,最大潮流时刻12:00，最大潮流200MW，设备限额150MW，预计越限50MW',apply:'申请调节****储能资源，调节时段11:30-13:00，调节功率-20MW。',info:'泰州****主变过载，请求调用****储能资源'},
        {city:'苏州',question:'*****35kV主变,最大潮流时刻12:00，最大潮流200MW，设备限额150MW，预计越限50MW',apply:'申请调节****储能资源，调节时段11:30-13:00，调节功率-20MW。',info:'苏州****主变过载，请求调用****储能资源'},
        {city:'徐州',question:'*****35kV主变,最大潮流时刻12:00，最大潮流200MW，设备限额150MW，预计越限50MW',apply:'申请调节****储能资源，调节时段11:30-13:00，调节功率-20MW。',info:'徐州****主变过载，请求调用****储能资源'},
        {city:'南通',question:'*****35kV主变,最大潮流时刻12:00，最大潮流200MW，设备限额150MW，预计越限50MW',apply:'申请调节****储能资源，调节时段11:30-13:00，调节功率-20MW。',info:'南通****主变过载，请求调用****储能资源'},
        {city:'镇江',question:'*****35kV主变,最大潮流时刻12:00，最大潮流200MW，设备限额150MW，预计越限50MW',apply:'申请调节****储能资源，调节时段11:30-13:00，调节功率-20MW。',info:'镇江****主变过载，请求调用****储能资源'},
        {city:'宿迁',question:'*****35kV主变,最大潮流时刻12:00，最大潮流200MW，设备限额150MW，预计越限50MW',apply:'申请调节****储能资源，调节时段11:30-13:00，调节功率-20MW。',info:'宿迁****主变过载，请求调用****储能资源'},
        {city:'连云港',question:'*****35kV主变,最大潮流时刻12:00，最大潮流200MW，设备限额150MW，预计越限50MW',apply:'申请调节****储能资源，调节时段11:30-13:00，调节功率-20MW。',info:'连云港****主变过载，请求调用****储能资源'},
      ],
      selRecordIndex:0,
      selRecord: {},
      chart1: undefined,
      chart1Option: {
        color:['#2BB193','#E47474'],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "6%",
          type: "plain",
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["00:15", "05:00", "09:45", "14:30", "19:15", "24:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "越限设备潮流",
            type: "line",
            data: [220, 132, 301, 234, 190, 230, 110],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "越限设备限额",
            type: "line",
            data: [220, 182, 191, 234, 290, 330, 310],
            smooth: true,
            symbolSize: 0,
          }
        ],
      },
      chart2: undefined,
      chart2Option: {
        color:['#2BB193','#9A67E8','#E47474'],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "6%",
          type: "plain",
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["00:15", "05:00", "09:45", "14:30", "19:15", "24:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "原始计划",
            type: "line",
            data: [220, 132, 301, 234, 190, 230, 110],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "调整量",
            type: "line",
            data: [210, 122, 291, 214, 160, 220, 100],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "调整后计划",
            type: "line",
            data: [220, 102, 171, 204, 240, 200, 90],
            smooth: true,
            symbolSize: 0,
          }
        ],
      },
    }
  },
  mounted() {
    this.zysqxq(0);//默认加载第一行
  },
  methods:{
    zysqxq(index){
      this.selRecordIndex=index;
      this.selRecord=this.tableData[index];
      this.$nextTick(()=>{
        if(this.chart1==undefined){
          this.chart1 = echarts.init(this.$refs.chart1);
        }
        this.chart1.clear();
        this.chart1Option && this.chart1.setOption(this.chart1Option);
        if(this.chart2==undefined){
          this.chart2 = echarts.init(this.$refs.chart2);
        }
        this.chart2.clear();
        this.chart2Option && this.chart2.setOption(this.chart2Option);
      });
    }
  }
}
</script>

<style scoped lang="scss">
*{
  box-sizing: border-box;
}
.container_main{
  position: relative;
  display: flex;
  flex-direction: column;
  .container_top {
    width: 100%;
    height: 480px;
    display: flex;
    .top_left{
      width: 20%;
      height: 100%;
      padding: 10px 10px 30px 10px;
      background: url("../../../assets/images/phyd_bg.png") center no-repeat;
      background-size: 100% 100%;
      .title {
        width: 100%;
        height: 34px;
        line-height: 34px;
        padding-left: 47px;
        padding-right: 20px;
        box-sizing: border-box;
        color: #00706b;
        font-size: 18px;
        font-weight: bold;
        background: url(../../../assets/images/views/home/titleBg.png) left center no-repeat;
      }
      .records{
        width: 100%;
        height: calc(100% - 36px);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        .record{
          width: 100%;
          padding: 3px 5px;
          border-bottom: 1px dashed #59A2A6;
          margin-top: 5px;
          display: flex;
          justify-content: flex-start;
          align-items: flex-end;
          .index{
            width: 25px;
            height: 25px;
            line-height: 25px;
            font-weight: bold;
            font-size: 13px;
            text-align: center;
            color: #00706B;
            background: url("../../../assets/images/num-bg.png") center no-repeat;
            background-size: 100% 100%;
            margin-right: 5px;
          }
          .info{
            flex:1;
            color: #414346;
            font-size: 15px;
          }
          &:hover,
          &:focus,
          &.on{
            background-color: #92c9be;
          }
        }
      }
      ::-webkit-scrollbar {
        width: 5px;
      }

      ::-webkit-scrollbar-thumb {
        border-radius: 5px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #1cc5be;
      }

      ::-webkit-scrollbar-track{
        width:5px;
        border-radius: 5px;
        background-color: #dddddd;
      }
    }
    .top_right{
      width: 80%;
      height: 100%;
      padding: 2px 10px 0px 10px;
      background: url("../../../assets/images/zysq-bg.png") center no-repeat;
      background-size: 100% 100%;
      .title {
        width: 100%;
        height: 35px;
        line-height: 35px;
        padding-left: 47px;
        padding-right: 20px;
        box-sizing: border-box;
        color: #00706b;
        font-size: 18px;
        font-weight: bold;
      }
      .content{
        width: 100%;
        height: calc(100% - 35px);
        display: flex;
        .part{
          width: 33.33%;
          height: 100%;
          padding: 10px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          .tit{
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: url(../../../assets/images/tab-sel.png) center no-repeat;
            color:#2D3B4D;
          }
          .chart{
            width: 100%;
            height: calc(100% - 30px);
          }
          .row{
            width: 100%;
            height: auto;
            margin: 20px auto;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            .label{
              z-index:2;
              margin-right: -25px;
              margin-top: -1px;
              width: 100px;
              height: 32px;
              line-height: 32px;
              text-align: center;
              background: linear-gradient(0deg, rgb(0,182,188) 0%, rgb(0,87,97) 95%);
              border: 1px solid #2BB193;
              color: #ffffff;
              font-weight: bold;
              font-size: 16px;
              clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%,0 50%);
            }
            .val{
              position: relative;
              width: 290px;
              height: auto;
              padding-left: 30px;
              .val--{
                position: relative;
                z-index:5;
                color: #414346;
                font-size: 16px;
                width: 100%;
                line-height: 30px;
                font-family: SourceHanSansSC;
              }
              &.val1{
                padding: 10px 10px 10px 30px;
                .val--{
                  line-height: 25px;
                }
              }
            }
            .val::before,.val::after{
              content: '';
              display: block;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              clip-path: polygon(5% 0, 100% 0, 100% 100%, 5% 100%,0 50%);
            }
            .val::before{
              width: calc(100% + 2px);
              height: calc(100% + 2px);
              background: #59A2A6;
            }
            .val::after{
              width:100%;
              height: 100%;
              background: #f2f7f8;
            }
          }
        }
      }
    }
  }
  .container_bottom{
    width: 100%;
    height: 250px;
    background: url("../../../assets/images/shengdiao.png") center no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    .title {
      width: 100%;
      height: 44px;
      line-height: 44px;
      padding-left: 47px;
      padding-right: 20px;
      box-sizing: border-box;
      color: #00706b;
      font-size: 18px;
      font-weight: bold;
    }
    .content{
      width: 100%;
      height: calc(100% - 40px);
      padding-top: 10px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      .col{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .icon{
          width: 89px;
          height: 95px;
        }
        .desc{
          height: 28px;
          line-height: 28px;
          font-size: 16px;
          font-weight: 500;
        }
        .status{
          width: 40px;
          height: 40px;
          z-index: 2;
        }
      }
      .col--{
        height: 100%;
        margin-left: 40px;
        margin-right: 50px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        .arrow{
          margin-top: 50px;
          width: 65px;
          height: auto;
        }
      }
      .dashed{
        width: 840px;
        height: auto;
        position: absolute;
        bottom: 42px;
        z-index: 1;
        left: calc(50% - 405px);
      }
    }
  }
}
</style>
